DevGuru JavaScript OBJECT: Radio



			OBJECT: Radio The Radio object represents a single radio button, created by an HTML <INPUT> tag of type "radio", in a series from which the user may select only one. It is for this reason that all radio buttons in a group must have the same value for the NAME attribute. The Radio object is a form element and as such must be included within a <FORM> tag. The JavaScript runtime engine creates a Radio object for each individual radio button on the form. Those which form a group, and hence share the same NAME attribute, are stored as an array of that name. This array is in turn stored as a single element of the elements array of the Form object. You can access a set of radio buttons through this elements array either by the index number or by name. To access an individual button you need to refer to it as an element of the array of those buttons with the same NAME attribute. For instance, assuming a set of radio buttons with the name "drink", you could refer to it as follows: Code: document.myForm.drink ...or by its number in the elements array of the appropriate form (assume it to be 3 in this case): Code: document.myForm.elements[3] Then, say, to display the value of the radio button at element # 1 of the "drink" array, you could use the following code: Code: document.write(document.myForm.drink[1].value) PROPERTIES checked Property This property, which is by default tainted, is a Boolean value which reflects whether a particular radio button has been selected, returning true if it has and false if not. As only one radio button in a set can be selected at any one time, it follows that if the select property of one is true, then that property for the others of that set is false. The checked property can be set at any time and the change is immediately reflected in the display. Syntax: object.checked defaultChecked Property This property, which is by default tainted, is a Boolean value initially reflecting whether a particular radio button was selected by default using the CHECKED attribute, returning true if it was, and false if not. The defaultChecked property can be set at any time, but the change is not displayed, nor does it affect the defaultChecked property of any other radio button in the set. Syntax: object.defaultChecked form Property This property is a reference to the parent form of a set of radio buttons that share the same NAME attribute. Syntax: object.form name Property This property, tainted by default, refers to the NAME attribute of the set to which one particular radio button belongs. The name property can be set at any time but doing so places a radio button in a different group. Syntax: object.name type Property This property specifies the type of an element in a form and reflects the TYPE attribute. In the case of a set of radio buttons, this is "radio". Syntax: object.type value Property It is this property that is returned to the server when a radio button is selected and the form submitted. It is not displayed and so is not necessarily the same as any text that may appear alongside the radio button. The value property is tainted by default and reflects the VALUE attribute of the HTML code. Where no value is specified, the value property is the string "on". Syntax: document.value METHODS blur Method This method removes focus from a selection list. Syntax: object.blur() click Method This method programatically triggers a radio buttons onClick event handler. Syntax: object.click() focus Method This method moves the focus to the specified selection list allowing the user to then select from it. Syntax: object.focus() handleEvent Method This method calls the handler for a specified event. Syntax: object.handleEvent(event) NOTE: The Radio object also inherits the watch and unwatch methods from the Object object. EVENT HANDLERS onBlur EventHandler This event handler causes JavaScript code to be executed whenever a blur event occurs; i.e. whenever a window, frame or form element loses focus. Syntax: onBlur = "myJavaScriptCode" onClick EventHandler The onClick event handler executes javaScript code whenever the user clicks (i.e. when the mouse button is pressed and released) on a Form object. Syntax: onClick = "myJavaScriptCode" onFocus EventHandler This event handler executes JavaScript whenever a focus event occurs; i.e. whenever the user focuses on a window, frame or frameset, or inputs to a form element. Syntax: onFocus = "myJavaScriptCode"